<template>
	<view class="main_bg">
		<view class="cell-group">
			<view class="flex border-bottom">
				<image :src="device_info.store_img" mode="" class="image"></image>
				<view class="flex-right">
					<view class="title">{{device_info.device_name}}</view>
					<view class="device">{{device_info.type_name1.district_name}}</view>
					<view class="specs">
						<view class="">类型：{{device_info.type_name2.district_name}}</view>
						<view class="">品牌：{{device_info.type_name3.district_name}}</view>
						<view class="">系列：{{device_info.type_name4.district_name}}</view>
						<view class="">编号：{{device_info.device_sn}}</view>
					</view>
				</view>
			</view>
			<view class="title">保养情况</view>
			<view class="fault-content">
				{{detail.member_describe_s}}
				<view class="imgs_list">
					<view class="imgs_son" v-for="(vo,idx) in detail.member_imgs_ff" :key="idx">
						<u-image :src="vo" mode="aspectFill" width="120rpx" height="120rpx"
							@click="$func.previewImage(vo,detail.member_imgs_ff)"></u-image>
					</view>
				</view>
			</view>
			<view class="flex">
				<view class="title">提交时间</view>
				<view class="time">{{detail.created_at}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					id: ''
				},
				device_info: '',
				detail: ''
			}
		},
		onLoad(options) {
			this.$set(this.query, 'id', options.id)
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$http.post('/data/api.auth.User/inspectionListView', this.query).then(res => {
					const data = res.data
					Object.keys(data).map(key => {
						this.$set(this, key, data[key])
					})
				})
			},
		}
	}
</script>

<style scoped lang='scss'>
	.main_bg {
		padding: 30rpx 20rpx;
	}

	.cell-group {
		border-radius: 20rpx;
		background: white;
		padding: 42rpx 48rpx;

		.flex {
			display: flex;
			margin-bottom: 30rpx;
		}

		.border-bottom {
			border-bottom: 2rpx solid #E9E9E9;
			padding-bottom: 20rpx;
		}

		.image {
			width: 218rpx;
			height: 218rpx;
			background-color: #E4E4E4;
			border-radius: 10rpx;
		}

		.flex-right {
			flex: 1;
			margin-left: 26rpx;
			display: flex;
			gap: 20rpx;
			flex-direction: column;

			.title {
				color: #333;
				fon-size: 36rpx;
			}

			.device {
				color: #ADADAD;
				font-size: 24rpx;
				background-color: #F8F8F8;
				border-radius: 10rpx;
				padding: 20rpx;
				width: fit-content;
			}

			.specs {
				color: #ADADAD;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				gap: 20rpx;
			}
		}

		.title {
			color: #333333;
			font-size: 28rpx;
		}

		.time {
			color: #ADADAD;
			font-size: 28rpx;
			margin-left: auto;
		}

		.fault-content {
			background: #F5F5F5;
			border-radius: 10rpx;
			padding: 24rpx 30rpx;
			word-break: break-all;
			margin: 20rpx 0;
		}
	}

	.imgs_list {
		display: flex;
		justify-content: flex-start;
		gap: 20rpx;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.imgs_son {
			border-radius: 4px;
			overflow: hidden;
		}
	}
</style>